<template>
  <div class="promote-container">
    <h3 class="promote-titile">去哪儿推荐</h3>
    <div class="ticket-price-list">
      <div class="ticket-item border-bottom">
        <div class="ticket-main">
          <h6 class="ticket-title">北京故宫大门票+珍宝馆+资深导游讲解（配无线耳麦）*成人票</h6>
          <div class="ticket-light">
            <span class="ticket-desctag">
              <img class="ticket-descimg" src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20202/ea3f321aea9fbf93098a78bdddd3306f.png">
              可订10月15日
            </span>
          </div>
          <ul class="ticket-labelcon">
            <li>
              <img src="https://img1.qunarzz.com/piao/fusion/1804/b0/c3cf2897c74ecc02.png">
              <span>自营</span>
            </li>
            <li><span>条件退</span></li>
            <li><span>无需换票</span></li>
          </ul>
        </div>
        <div class="ticket-side">
          <div class="ticket-sale">¥<span>119</span></div>
          <div class="ticket-btn">立即订购</div>
        </div>
      </div>
            <div class="ticket-item border-bottom">
        <div class="ticket-main">
          <h6 class="ticket-title">北京故宫大门票+珍宝馆+资深导游讲解（配无线耳麦）*成人票</h6>
          <div class="ticket-light">
            <span class="ticket-desctag">
              <img class="ticket-descimg" src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20202/ea3f321aea9fbf93098a78bdddd3306f.png">
              可订10月15日
            </span>
          </div>
          <ul class="ticket-labelcon">
            <li>
              <img src="https://img1.qunarzz.com/piao/fusion/1804/b0/c3cf2897c74ecc02.png">
              <span>自营</span>
            </li>
            <li><span>条件退</span></li>
            <li><span>无需换票</span></li>
          </ul>
        </div>
        <div class="ticket-side">
          <div class="ticket-sale">¥<span>119</span></div>
          <div class="ticket-btn">立即订购</div>
        </div>
      </div>
            <div class="ticket-item border-bottom">
        <div class="ticket-main">
          <h6 class="ticket-title">北京故宫大门票+珍宝馆+资深导游讲解（配无线耳麦）*成人票</h6>
          <div class="ticket-light">
            <span class="ticket-desctag">
              <img class="ticket-descimg" src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20202/ea3f321aea9fbf93098a78bdddd3306f.png">
              可订10月15日
            </span>
          </div>
          <ul class="ticket-labelcon">
            <li>
              <img src="https://img1.qunarzz.com/piao/fusion/1804/b0/c3cf2897c74ecc02.png">
              <span>自营</span>
            </li>
            <li><span>条件退</span></li>
            <li><span>无需换票</span></li>
          </ul>
        </div>
        <div class="ticket-side">
          <div class="ticket-sale">¥<span>119</span></div>
          <div class="ticket-btn">立即订购</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListPromote'
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
  .promote-container
    background: #fff
    padding: 0 .2rem .3rem
    .promote-titile
      font-size: .4rem
      font-weight: bold
      padding-top: .4rem
      color: $detailTitle
    .ticket-price-list
      background: $bodybgColor
      border-radius: .15rem
      margin-top: .4rem
      padding: .2rem .2rem .4rem
      .ticket-item
        display: flex
        padding: .3rem 0
        overflow: hidden
        align-items: center
        .ticket-main
          flex: 0.7
          .ticket-title
            line-height: .4rem
          .ticket-desctag
            display: flex
            align-items: center
            height: .4rem
            padding: .1rem 0
            font-size: .1rem
            color: #00afc7
            .ticket-descimg
              width: .25rem
              height: .25rem
          .ticket-labelcon
            display: flex
            height: .3rem
            line-height: .3rem
            font-size: .2rem
            color: #00afc7
            li
              border: .01rem solid #a5e4ec
              padding: 0 .1rem
              img
                width: .3rem
                padding-right: .08rem
        .ticket-side
          flex: 0.3
          padding-left: .2rem
          height: 100%
          text-align: center
          .ticket-sale
            color: #ff8300
            span
              color: #ff8300
              font-size: .4rem
          .ticket-btn
            color: #fff
            font-size: .2rem
            border-radius: .3rem
            height: .5rem
            width: 1.4rem
            line-height: .5rem
            margin: auto
            margin-top: .08rem
            background-image: linear-gradient(145deg,#ffab1e 0,#ff8c12 100%)
</style>
